<template>
    <div class="ordDefault">
        <div class="selectList">
            <ul class="">
                <li>
                    <label for="number">行程编号：</label>
                    <input type="text" id="number" v-model="number">
                </li>
                <li>
                    <button class="searchBtn" type="button" @click="inquire()">查询</button>
                </li>
                <li class="search-r">
                  <a href="javascript:;" @click="derive(task)"><span class="export-icon"></span>导出</a>
                  <a href="javascript:;" @click="getDetails(task)"><span class="eye-icon"></span>查看</a>
                </li>
            </ul>
        </div>
        <div class="datas-box" v-show="listBox">
          <div class="left-cont">
            <table class="table table-bordered table-hover" id="exportTable" v-show="listBox">
              <thead>
              <tr class="active">
                <th width="25%">行程编号</th>
                <th width="25%">出发地-目的地</th>
                <th width="25%">起止日期</th>
                <th width="25%">管理员电话</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="val in List" @click="getJournal(val)">
                <td><span class="number">{{val.xchSn || '未设置'}}</span></td>
                <td><span>{{val.startCity || '未设置'}} - {{val.destiCity || '未设置'}}</span></td>
                <td class="des">
                  <span class="timespan">{{timeFormat(val.startDate)}}</span>至<span class="timespan">{{val.finishDate?val.finishDate.substring(0,10):'未设置'}}</span>
                </td>
                <td><span>{{val.managePhone || '未设置'}}</span></td>
              </tr>
              </tbody>
            </table>
            <FootPage :Pieces="pieces" :PiecePage="pageNum" :Page="pages" v-on:current-page="currentPage"></FootPage>
          </div>
          <div class="detail-box">
            <div class="detail-head">详细信息</div>
            <div class="detal-content">
              <div>行程编号：{{journalDetail.xchSn || '未设置'}}</div>
              <div>出发地区/目的地区：{{journalDetail.startCity || '未设置'}} - {{journalDetail.destiCity || '未设置'}}</div>
              <div>起止日期：{{timeFormat(journalDetail.startDate)}}至{{journalDetail.finishDate?journalDetail.finishDate.substring(0, 10):'未设置'}}</div>
              <div>天数：{{journalDetail.day?journalDetail.day+'天':'未设置'}}</div>
              <div>描述：{{journalDetail.content || '未设置'}}</div>
              <div>是否有配图：{{journalDetail.coImage==='' ? '否' : '是'}}</div>
              <div>上传时间：{{journalDetail.createTime || '未设置'}}</div>
              <div>管理员电话：{{journalDetail.managePhone || '未设置'}}</div>
            </div>
          </div>
        </div>

        <div class="NoData" v-show="NoData">
            对不起，没有数据
        </div>
        <div style="display:none" :id="'derive'+$attrs.text"></div>
    </div>
</template>
<script>
    import FootPage from '@/components/public/footpage'
    export default {
        data(){
            return {
              // 数据控制显示模块
              NoData:false, // 没有数据的时候的模块 默认隐藏
              listBox:true, // 数据列表模块 默认显示
              Http:'',// 数据接口连接
              deriveHttp:'',//导出接口
              // 禁止查询频繁操作
              trigger:true,
              triggerTime:'',
              // 子组件FootPage向父组件传值  页数跳转，数据渲染
              // 父组件向子组件FootPage传值  每一页多少条=》也可以直接在子组件内设置
              pieces:'',//数据总数
              pageNum:'',//每页数据条数
              pages:'1',//当前页码

              StatusList:[
                {text:'全部',value:''},
                {text:'已结算',value:1},
                {text:'未结算',value:0},
              ],//状态
              platforms:[
                {text:'全部',value:''},
                {text:'钱包',value:10},
                {text:'支付宝',value:11},
                {text:'微信',value:12},
                {text:'银行卡',value:13},
              ],//平台
              // 要向后台传递的数据
              phone:'', //管理员电话
              number:'',// 行程编号
              start:'',//开始时间
              startDate:'',
              end:'',//结束时间
              endDate:'',
              title:'',//标题
              List:'',// 列表数据
              journalDetail: {},
              task: {}
            }
        },
        props:['subNav'],
        watch:{
          subNav: function(val) { // 二级导航数据
            this.pagination(window.location.href,1)
            this.pages=this.paginations(1);
            this.port(); //获取对应的二级导航数据
          }
        },
        computed:{
          BlogPingtaiIndex(){
            return this.$store.state.interface.BlogPingtaiIndex;
          },
          BlogExportAuthorToWord(){
            return this.$store.state.interface.BlogExportAuthorToWord;
          }
        },
        methods:{
          getJournal (val) {
            this.journalDetail = val;
            this.task = val;
          },
          getDetails (val) {
            if (val.xid) {
              this.$store.commit('NEW_JOURNAL_TAB',{
                title:'日志详情',
                components:'JournalProDetails',
                dataId:val.xid,// 账单ID
              });
            } else {
              layer.msg('请选择要查看的日志!');
            }
          },
          // 导出列表 表格
          exportList(tableId,e){
            // var oXL = new ActiveXObject("Excel.Application");
            // var oWB = oXL.Workbooks.Add();
            // var oSheet = oWB.ActiveSheet;
            // var sel=document.body.createTextRange();
            // sel.moveToElementText(tableId);
            // sel.select();
            // sel.execCommand("Copy");
            // oSheet.Paste();
            // oXL.Visible = true;
            layer.msg('对不起，该功能暂未开放!');
          },
          derive(val){
            let self = this;
            if (val.xchSn) {
              let htmls=`${self.deriveHttp}&xchSn=${val.xchSn}&pageId=0&size=15&app=liexing&platform=ios&ver=3`;
              $('#derive'+self.$attrs.text).html('<iframe src="'+htmls+'" id="Pcyear"></iframe>')
            } else {
              layer.msg('请选择需要导出的日志!');
            }
          },
          currentPage: function(msg){
            this.pages = msg;
            if(this.phone==='' && this.number==='' & this.startDate==='' && this.endDate==='' && this.title===''){
              this.pagination(window.location.href,msg);
              this.pages=this.paginations(this.pages);
            }
            this.port(); //获取对应页码数据
          },
          inquire(){//查询
            let self = this;
            if(self.trigger){
              self.trigger=false;
              self.pagination(window.location.href,1);
              self.pages=self.paginations(1);
              if(self.start===''){
                self.startDate='';
              }
              if(self.end===''){
                self.endDate='';
              }
              self.port(); //获取对应的数据
              self.triggerTime=setTimeout(function(){
                self.trigger=true;
              },1500)
            }
          },
          lessThenTen (time) {
            return time < 10 ? '0' + time : time
          },
          timeFormat(timeStamp){
            //timeStamp是整数，否则要parseInt转换
            let time = new Date(parseInt(timeStamp));
            return `${time.getFullYear()}-${this.lessThenTen(time.getMonth()+1)}-${this.lessThenTen(time.getDate())}`;
          },
          // 获取数据函数port()
          port(){
            layer.load(2);
            let self = this;
            let formData =new FormData(); // 基础信息表单数据
            formData.append('xchSn', self.number);
            formData.append('pageId', self.pages);
            formData.append('size', self.pageNum);
            formData.append('app', 'liexing');
            formData.append('platform', 'web');
            formData.append('ver', '3');
            self.$ajax.post(self.Http,formData).then(function(res){
              layer.closeAll('loading');
              let code = res.data.code;
              // 没有数据或者数据错误
              self.NoData=false;
              self.listBox=true;
              if(code === '10000'){
                let ShowList= res.data.result;
                console.log(ShowList);
                for(let i in ShowList){
                  self.List = ShowList[i];
                  self.journalDetail = self.List[0]
                }
                self.pieces=res.data.amount;

                self.$nextTick(() => {
                  $('.table tr').each(function () {
                    $(this).on('click', function () {
                      $(this).addClass('click-active');
                      $(this).siblings().removeClass('click-active');
                    })
                  });
                });

              } else{
                // 没有数据或者数据错误
                self.codes(code);
                self.NoData=true;
                self.listBox=false;
                self.pieces=0;
              }
            },function(res){
              layer.closeAll('loading');
              self.pieces=0;
              layer.msg('服务器错误！');
            })
          }
        },
        beforeMount(){
          let url = this.BlogPingtaiIndex;
          let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
          this.Http =`${url}?sid=${sessionId}`;
          this.deriveHttp=`${this.BlogExportAuthorToWord}?sid=${sessionId}`;
          this.pageNum = this.$store.state.pageNum;
          // 页码
          this.pages=this.paginations(this.pages);
          // 调用获取数据函数port()
          this.port();
        },
        mounted(){//自运行的函数
          let self = this;
          self.pageNum = this.$store.state.pageNum;
          // 起始时间
          $("#startDate").datepicker({
            showAnim: 'fadeIn',
            minDate: '-2y',
            maxDate: '+1y',
            defaultDate : -7,
            duration : 'fast',
            firstDay : 1 ,
            nextText : '下一月',
            prevText : '上一月',
            showButtonPanel: true,
            currentText : '今天',
            gotoCurrent : false,
            onSelect: function (dateText, inst) {
              $("#endDate").datepicker("option","minDate",dateText);
              self.start = dateText;
              self.startDate= Date.UTC(inst.currentYear, inst.currentMonth, inst.currentDay)/1000;
            }
          });
          // 结束时间
          $("#endDate").datepicker({
            showAnim: 'fadeIn',
            minDate: '-2y',
            maxDate: '+1y',
            defaultDate : -7,
            duration : 'fast',
            firstDay : 1 ,
            nextText : '下一月',
            prevText : '上一月',
            showButtonPanel: true,
            currentText : '今天',
            gotoCurrent : false,
            onSelect:function(dateText,inst){
              $("#startDate").datepicker("option","maxDate",dateText);
              self.end = dateText;
              self.endDate= Date.UTC(inst.currentYear, inst.currentMonth, inst.currentDay)/1000;
            }
          })
        },
        components:{
          FootPage,
        },

    }
</script>
<style lang="scss" scoped>
  .datas-box{
    display:box; /*（伸缩盒最老版本） */
    display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
    display:-webkit-flex; /* Chrome */
    display:-moz-box;     /* Firefox 19 */
    display:-ms-flexbox;
    display:flex;  /*flex容器*/
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ddd;
  }
  tr.click-active{
    background: #f5f5f5;
  }
  .left-cont{
    width: 76%;
    margin: 10px;
  }
  .detail-box{
    width: 24%;
    background: #fff;
    border-left: 1px solid #ddd;
    overflow-y: auto;
  }
  .detal-content{padding: 10px 14px;}
  .detal-content div{padding-bottom: 14px;}
  .table-bordered{
    border-left: none!important;
    border-right: none!important;
  }
  .detail-head{
    background: #09ba79;color: #fff;
    padding: 0 14px;
    line-height: 33px;
    font-size: 14px;
  }
    .table-bordered{
        td {
            .number,.name{
                color: #4e5e7e;
                cursor: initial;
            }
            &.handle{
                .orderBtn{
                    color:#09ba79;
                    cursor:pointer;
                }
            }
            .timespan{
                display: inline-block;
                white-space: nowrap;
            }
         }
    }
  .search-r a{
    display: inline-block;
    color:#09ba79;
    margin-top: 8px;margin-right: 8px;
  }
    .search-r a:last-child{margin-right: 0;}
  .export-icon{
    float: left;
    width: 14px;height: 14px;
    background: url("../../assets/images/export_icon.png") no-repeat;
    background-size: 100% 100%;
    margin: 1px 4px 0 0;
  }
  .eye-icon{
    float: left;
    width: 16px;height: 12px;margin: 3px 4px;
    background: url("../../assets/images/eye_icon.png") no-repeat;
    background-size: 100% 100%;
  }
</style>
